@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-iconPredefined';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

$appearances: 'primary', 'neutral', 'red', 'orange', 'yellow', 'green', 'blue', 'violet', 'pink';

$sizes: (
  's': simple-var($icon-s),
  'm': simple-var($icon-s),
  'l': simple-var($icon-scale-x2),
);

.decor {
  overflow: hidden;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  &[data-decor] {
    @each $appearance in $appearances {
      &[data-appearance='#{$appearance}'] {
        color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');
        background-color: simple-var($theme-variables, 'sys', $appearance, 'decor-default');
      }
    }
  }

  @each $size, $sideLength in $sizes {
    &[data-size='#{$size}'] {
      &[data-shape='round'] {
        @include composite-var($icon-predefined, 'decor-round', $size);
      }

      &[data-shape='square'] {
        @include composite-var($icon-predefined, 'decor-square', $size);
      }
    }
  }
}

.icon {
  &,
  svg {
    fill: currentColor;
  }

  @each $appearance in $appearances {
    &[data-appearance='#{$appearance}'] {
      color: simple-var($theme-variables, 'sys', $appearance, 'accent-default');
    }

    @each $size, $sideLength in $sizes {
      &[data-size='#{$size}'] {
        width: $sideLength !important; /* stylelint-disable-line declaration-no-important */
        height: $sideLength !important; /* stylelint-disable-line declaration-no-important */
      }
    }
  }

  // для желтого исключение
  &[data-appearance='yellow'] {
    color: $sys-yellow-text-light;
  }
}
